<?php
    $css_list[0]['url'] = './tpl/css/article.css';
?>
<!--{template inc/header_n}-->
<style type="text/css">
.mhead {width: 100%;height: 30px;line-height: 30px;background-color: #f7f7f7;}
.mhead li {float: left;width: 50%;text-align: center;}
.inventory {background:none;}
.inventory .i_cata li {border: none;}
.inventory .i_cata {padding-top: 0;width: 170px;}
.active {background-color: #fff;font-weight: bold;}
.uimg {width: 32px;height: 32px;left:0;top:0px;position: absolute;}
</style>

<div class="main_warp">
    <div class="inventory">
        <div class="i_lefter">
            <div class="i_cata">
                <ul class="mhead">
                    <li id="m1" class="active" onclick="tab(1)">最近</li>
                    <li id="m2" onclick="tab(2)">好友</li>
                </ul>
                <ul id="tab1">
                    {loop $recents $k $v}
                    <li id="user_{$k}" data-uid="{$k}" data-dateline="{$v['dateline']}" style="margin: 5px;position: relative;">
                        <a class="recent_list" style="padding-left: 35px;" href="javascript:void(0);" onclick="wxtalk({$k}, '{$v['user_name']}', this)">
                            <img class="uimg" src="{$v['avatar']}" />
                            {$v['user_name']}<span id="msgnum_{$k}">{if $v['to_uid']==$_FANWE['uid'] && $v['msg_num']>0}({$v['msg_num']}){/if}</span>
                        </a>
                    </li>
                    {/loop}
                </ul>
                <ul id="tab2" style="display: none;">
                    {loop $user_list $v}
                    <li style="margin: 5px;position: relative;">
                        <a class="user_list" style="padding-left: 35px;" href="javascript:void(0);" onclick="wxtalk({$v['uid']}, '{$v['user_name']}', this)">
                            <img class="uimg" src="{$v['avatar']}" />
                            {$v['user_name']}
                        </a>
                    </li>
                    {/loop}
                </ul>
            </div>
        </div>

        <div class="i_righter">
            <div class="robot" id="robot">
                <div class="i_box">
                    <div class="i_title"><span id="title"></span></div>
                    <div id="swrap" class="i_list">
                        <ul id="wrap"></ul>
                    </div>
                    <div class="i_post">
                        <input type="text" id="message" class="g_ipt1" size="64" onkeydown='if(event.keyCode==13){wxsend();}'/>
                        <input type="button" onclick="wxsend()" value="发送" class="g_btn1" />
                    </div>
                </div>
            </div>

        </div>
        <br class="g_clear" />

    </div>

</div>



<!--{template inc/footer}-->
<script type="text/javascript">
function wxsend(message) {
    if(!curr_uid) {
        alert('请选择聊天对象');
        return;
    }

    var message = $('#message').val();
    if(message == '') {
        alert('请输入消息');
        return;
    }
    
    $.post('/wxmessage.php?action=send', {message:message,uid:curr_uid}, function(s) {
        var arr = s.split('#');
        if(arr[0] == '1') {
            curr_msgid = arr[1];
            var date = new Date();
            var hour = date.getHours();
            hour = hour > 9 ? hour : '0' + hour;
            var min = date.getMinutes();
            min = min > 9 ? min : '0' + min;
            var datestr = hour + ':' + min;

            $('#wrap').append('<li><div class="j_time">'+datestr+'</div><div class="j_me"><img src="{avatar $_FANWE['user']['avatar'] m}" class="k_img"><div class="k_body"><div class="k_content"><p>'+message+'</p></div><div class="arrow"></div></div><div class="g_clear"></div></div></li>');

            $('#message').val('');
            var div = document.getElementById('swrap');
            div.scrollTop = div.scrollHeight;
        } else {
            alert('发送失败，请重试');
        }
    });
}

var curr_uid = 0;
var curr_msgid = 0;
function wxtalk(uid, uname, a) {
    $('.user_list').removeClass('wxmessage_curr');
    $('.recent_list').removeClass('wxmessage_curr');
    $(a).addClass('wxmessage_curr');

    curr_uid = uid;
    curr_msgid = 0;
    $('#msgnum_'+uid).html('');
    $('#title').html('与'+uname+'聊天中');
    $('#wrap').html('');
    wxlogs(uid, curr_msgid);
}

function wxlogs(uid, msgid) {
    $.ajax({
        'url' : '/wxmessage.php?action=logs&uid='+uid+'&msgid='+msgid,
        'type' : 'post',
        'dataType' : 'json',
        'success' : function(data) {
            if(data.error == '0') {
                for(var i in data.data) {
                    var message = data.data[i];
                    curr_msgid = message.id;
                    if(message.uid == {$_FANWE['uid']}) {
                        $('#wrap').append('<li><div class="j_time">'+message.dateline+'</div><div class="j_me"><img src="{avatar $_FANWE['user']['avatar'] m}" class="k_img"><div class="k_body"><div class="k_content"><p>'+message.message+'</p></div><div class="arrow"></div></div><div class="g_clear"></div></div></li>');
                    } else {
                        $('#wrap').append('<li><div class="j_time">'+message.dateline+'</div><div class="j_robot"><img src="'+message.to_avatar+'" class="k_img"><div class="k_body"><div class="k_content"><p>'+message.message+'</p></div><div class="arrow"></div></div><div class="g_clear"></div></div></li>');
                    }
                }

                var div = document.getElementById('swrap');
                div.scrollTop = div.scrollHeight;
            }
        }
    });
}

function get_recents() {
    var recents = [];
    $('#tab1 li').each(function(index, obj) {
        var dateline = parseInt(obj.dataset['dateline']);
        var uid = obj.dataset['uid'];
        recents.push({
            'uid' : uid,
            'dateline' : dateline,
            'html' : obj.outerHTML
        });
    });

    return recents;
}

function sortJ(a,b){
    return b.dateline-a.dateline;
}

function delbyuid(recents, uid) {
    for(var i in recents) {
        var v = recents[i];
        if(v.uid == uid) {
            delete recents[i];
        }
    }
}

function update_recents(recents) {
    $('#tab1').html('');
    for(var i in recents) {
        var v = recents[i];
        $('#tab1').append(v.html);
    }
}

function wxcheck() {
    window.setTimeout(function() {
        $.ajax({
            'url' : '/wxmessage.php?action=check',
            'type' : 'get',
            'dataType' : 'json',
            'success' : function(data) {
                if(data.error == '0') {
                    var recents = get_recents();
                    for(var i in data.data.items) {
                        var info = data.data.items[i];
                        var uid = info.uid;
                        if(uid == curr_uid) {
                            wxlogs(curr_uid, curr_msgid);
                        } else {
                            delbyuid(recents, uid)
                            var html = '<li id="user_'+uid+'" data-uid="'+uid+'" data-dateline="'+info.dateline+'"><a href="javascript:void(0);" onclick="wxtalk('+uid+', \''+info.user_name+'\')">'+info.user_name+'<span id="msgnum_'+uid+'">';
                            if(info.msg_num>0) {
                                html += '('+info.msg_num+')';
                            }
                            html+='</span></a></li>';
                            recents.push({
                                'uid' : uid,
                                'dateline' : info.dateline,
                                'html' : html
                            });
                        }
                    }

                    recents = recents.sort(sortJ);
                    update_recents(recents);
                }
            },
            'complete' : function() {
                wxcheck();
            }
        });
    }, 5000);
}

wxcheck();
{if $uid > 0}
wxtalk({$uid}, '{$uname}');
{/if}

function tab(i) {
    var he = i == 1 ? $('#m2') : $('#m1');
    he.removeClass('active');
    $('#m'+i).addClass('active');
    var hetab = i == 1 ? $('#tab2') : $('#tab1');
    hetab.hide();
    $('#tab'+i).show();
}
</script>